<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--↓emmm 这个css需要类名支持,并且可能会导致highlight渲染错误-->
  <!--<link rel="stylesheet" href="./github-markdown.css">-->
  <!--<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/a11y-dark.min.css">-->
  <link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/darcula.min.css" rel="stylesheet">
  <title>Document</title>
</head>
<body>

a

b
<div id="content" class="markdown-body"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"></script>

<script>
  /*
      html中默认会将两个字符之间的空格(包括换行回车) 转换为一个空格符
      而marked里 如果要解析的字符串中包括连续两次的`\n`以上 则一定会开启一个新的<p></p>
      如果`#`后有多个`\n` 或 一个`\n`,那么后面的内容就会被一个新的<p>包裹
      如果`#`前有多个`\n` 或 一个`\n`,那么`#`后的内容就会被解析为被h(x)包裹的html内容,而不是普通的字符#

      breaks: true的意思是 在一个<p></p>里 如果有\n 则会将\n转换为<br/>
  */
  document.getElementById('content').innerHTML =
    marked(`# Marked in the browser\n\nRendered by **marked**.\n\n\`aaa\`\n\nbbb\tcc\ndd\n\n## h2你@-_%^  title\n>引用:xxxxx\n\`\`\`html\n<a>123</a>\n\`\`\``,{
      /*默认null*/baseUrl:null // A prefix url for relative link
      ,/*默认false*/breaks: false // if true,add<br> on a single line break(copies GitHub). Requires gfm be true.
      ,/*默认true*/gfm: true // if true, use approved GitHub Flavored Markdown(GFM) specification

      // If true, include an id attribute when emitting headings (h1, h2, h3, etc).
      // 会以内容作为id(会忽略特殊符号,除了-,另外空格会被替换为-)
      // 比如这里的`## h2你@-_%^  title`的id生成为: h2你-_--title
      ,/*默认true*/headerIds: true

      ,/*默认空字符串*/headerPrefix: '' //A string to prefix the id attribute when emitting headings (h1, h2, h3, etc). 这里如果不为空,则所填字符串会作为id的前缀

      //TODO ↓这样高亮的话 并不会存在 hljs.initHighlightingOnLoad 这样调用时给自动补上<code> class="hljs javascript" 带来的背景色
      // ,/*默认null*/highlight: null // A function to highlight code blocks, see Asynchronous highlighting.
      // ,highlight:function(code, lang /*,callback*/){ /** 根据fn.length 此函数可以判断出我们这里是定义一个参数还是两个 如果是三个参数 说明是异步的渲染 需要调用完成时需要借助callback 而不是return*/
      //   console.log('code:',code); // code: <a>123</a>
      //   console.log('lang:',lang); // lang: html
      //   return hljs.highlightAuto(code).value
      // }

      // A string to prefix the className in a <code> block. Useful for syntax highlighting.
      // 即
      // ```html
      // <a href="#">a标签</a>
      // ```
      // 生成的html为
      // <pre><code class="language-html">&lt;a&gt;123&lt;/a&gt;</code></pre>
      ,/*默认为字符串language-*/langPrefix: 'language-'

      // ,/*默认为:true*/mangle: true //If true, autolinked email address is escaped with HTML character references.

      // ,/*默认为:false*/pedantic: false // If true, conform to the original markdown.pl as much as possible. Don't fix original markdown bugs or behavior. Turns off and overrides gfm. 如果为true就是严格的,如果是false,会帮我们按照gfm的标准自动修正一些我们markdown语法错误

      // ,renderer: //https://marked.js.org/#/USING_PRO.md#renderer


      /*
          If true, sanitize the HTML passed into markdownString with the sanitizer function.
Warning: This feature is deprecated and it should NOT be used as it cannot be considered secure.
Instead use a sanitize library, like DOMPurify (recommended), sanitize-html or insane on the output HTML!
      */
      // ,/*默认为:false*/sanitize: false // 不忽略html 比如直接插入一个iframe 为true的会就不会生效
      // ,/*默认为:null*/sanitizer: null //A function to sanitize the HTML passed into markdownString.


      // ,/*默认为:false*/silent: false // If true, the parser does not throw any exception.

      // ,/*默认为:false*/smartLists: false // If true, use smarter list behavior than those found in markdown.pl.

      // ,/*默认为:false*/smartypants: false //	If true, use "smart" typographic punctuation for things like quotes and dashes.

      // ,/*默认为:false*/xhtml: false // If true, emit self-closing HTML tags for void elements (<br/>, <img/>, etc.) with a "/" as required by XHTML.
    },(err,parsedString)=>{
      console.log('err:', err);
      console.log('parsedString:', parsedString);
      console.log('has been parsed');
      return parsedString;
    });

  console.log(`a\nb`)
</script>
<script>hljs.initHighlightingOnLoad();</script>


</body>
</html>
